<template>
  <div>
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="4" style="background: red"> 123123123 </el-col>

      <el-col :span="12">
        <el-carousel :interval="4000" height="300px">
          <el-carousel-item v-for="item in zmImg" :key="item.id">
          <!-- style="width:350px" -->
            <a :href="item.body"><img :src="item.imgUrl" style="width:100%;height:100%"  fit="cover" /></a>
          </el-carousel-item>
        </el-carousel>
      </el-col>

      <el-col :span="4" style="background: red"> 1231233 </el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="4" style="background: red"> 本周强推 </el-col>
      <el-col :span="12"> 编辑推荐 </el-col>
      <el-col :span="4" style="background: red"> 新人新风 </el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="4" >
        <book-ranking></book-ranking>
      </el-col>
      <el-col :span="4" >
        <book-ranking></book-ranking>
      </el-col>
      <el-col :span="4" >
        <book-ranking></book-ranking>
      </el-col>
      <el-col :span="4">
        <book-ranking></book-ranking>
      </el-col>
      <el-col :span="4" >
        <book-ranking></book-ranking>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BookRanking from "@/components/BookRanking.vue";
import {getAllRecommendByType} from '@/api'
export default {
  components: { BookRanking },
  data() {
    return {
      zmImg: [
      ],
    };
  },
  created(){
    getAllRecommendByType("网游").then(({data}) => {
      this.zmImg = data.data;
      console.log(data,"00000000000")
    }).catch((err) => {
      
    });
  }
};
</script>

<style scoped>
/* .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
.zm {
  width: 100%;
  height: 100%;
}
/* .sp { */
/* 容器指定为Flex布局 */
/* display: flex; */
/* 主轴为水平方向，起点在左端。 */
/* flex-direction: row; */
/* 如果一条轴线排不下，不换行。 */
/* flex-wrap: nowrap; */
/* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
/* justify-content: center; */
/* 项目的第一行文字的基线对齐。 */
/* } */
</style>

